<template>
  <el-dialog
    v-el-drag-dialog
    title="出库瓶号流转信息"
    :visible.sync="visible"
    width="500px"
    append-to-body
    @close="reset"
  >
    <div style="width: 100%;">
      <el-timeline>
        <el-timeline-item v-for="(item, index) in recordList" :key="index" :timestamp="parseTime(item.traceTime, '{y}-{m}-{d} {h}:{i}:{s}')" placement="top">
          <el-card>
            <div class="title">{{ item.contacter }}</div>
            <p>{{ item.traceDesc }}</p>
            <div class="dep"><div>发生部门 --- {{ item.facilityName }}</div></div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-dialog>
</template>

<script>
  import { parseTime } from '@/utils'
  import { callorBottleGet } from '@/api'
  export default {
    name: 'realseBottle',
    data() {
      return {
        visible: false,
        recordList: []
      }
    },
    methods: {
      parseTime,
      async open(temp) {
        return new Promise(async(resolve) => {
          this.visible = true
          if (temp) {
            this.id = temp
            this.getData()
          }
        })
      },
      async getData() {
        const res = await callorBottleGet({ id: this.id })
        this.recordList = res.data
      },
      reset() {
        this.recordList = []
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 10px;
    font-weight: 600;
  }
  .dep {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
</style>
